<template>
<div class="wechat-read">
    <div class="nut-swiper" :style="{ height: '350px' }">
      <div class="nut-swiper-wrapper">
        <div class="nut-swiper-slide" v-for="item in swiperData" :key="item">
          <img :src="item" alt="" />
        </div>
      </div>
      <div class="nut-swiper-pagination"></div>
    </div>
<div class="book-recommend">
  <h2>微信读书推荐</h2>
  <ul>
    <li>
      <img src="https://weread-1258476243.file.myqcloud.com/weread/cover/44/cpplatform_tweycmwdgv5kegl9rgght1/t6_cpplatform_tweycmwdgv5kegl9rgght11687684560.jpg" alt="图书1的描述" />
      
    </li>
    <li>
      <img src="	https://weread-1258476243.file.myqcloud.com/weread/cover/75/cpPlatform_dbb14284a55f1e733b60202b0777255d/t6_cpPlatform_dbb14284a55f1e733b60202b0777255d.jpg" alt="图书2的描述" />
      
    </li>
    <li>
      <img src="	https://weread-1258476243.file.myqcloud.com/weread/cover/61/YueWen_822995/t6_YueWen_822995.jpg" alt="图书3的描述" />
     
    </li>
  </ul>
</div>



  </div>
</template>
<script setup>
  import { reactive, toRefs } from 'vue'

const state = reactive({
  page: 2,
  swiperData: [
    'https://weread-1258476243.file.myqcloud.com/weread/cover/27/cpplatform_ogryplk7vtzajmta4sjkyu/t6_cpplatform_ogryplk7vtzajmta4sjkyu1686633735.jpg',
    'https://weread-1258476243.file.myqcloud.com/weread/cover/54/cpplatform_f17n8bgyqyhu7wgprw4yyr/t6_cpplatform_f17n8bgyqyhu7wgprw4yyr1686911948.jpg',
    'https://weread-1258476243.file.myqcloud.com/weread/cover/81/cpplatform_xicytorcp5fsf1m2errtjh/t6_cpplatform_xicytorcp5fsf1m2errtjh1685675532.jpg',
    'https://weread-1258476243.file.myqcloud.com/weread/cover/88/cpplatform_aq9uukpim68tqjwu4jkb2s/t6_cpplatform_aq9uukpim68tqjwu4jkb2s1686815150.jpg',
  ],
});


  var { page, swiperData } = { ...toRefs(state) }

  // 调用API接口，将接口获取的数据赋值给swiperData

</script>
<style>
.nut-swiper {
  position: relative;
  width: 100%;
  height: 100%;
}

.nut-swiper-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.nut-swiper-slide {
  position: absolute;
  width: 100%;
  height: 100%;
}

.nut-swiper-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wechat-read {

}

.book-recommend {

}

.book-recommend h2 {

}
</style>